<template>
  <div>
    <el-row :gutter="50" class="a">
      <el-col  class="b"><el-card >
        <div class="c">
          <span><p class="text">今日用户访问量：</p><span style=" font-size: 30px;color: rgb(47, 105, 182);">{{VisitsCount}}</span></span>
          <span><i class="el-icon-thumb" style="color:rgb(47, 105, 182)"></i></span>
        </div>
        </el-card>
        </el-col>
       <el-col  class="b">
         <el-card >
        <div class="c">
          <span><p class="text">今日营业额：</p><span style=" font-size: 30px;color:  rgb(230, 81, 71);">￥{{turnover}}</span></span>
          <span><i class="el-icon-wallet" style="color:rgb(230, 81, 71)"></i></span>
        </div>
        </el-card>
         </el-col>
        <el-col  class="b">
          <el-card >
        <div class="c">
          <span><p class="text">今日销售量：</p><span style=" font-size: 30px;color:  rgb(56, 211, 51);" >{{sales}}</span></span>
          <span><i class="el-icon-s-data" style="color:rgb(56, 211, 51)"></i></span>
        </div>
        </el-card>
        </el-col>
        <el-col  class="b">
          <el-card >
        <div class="c">
          <span><p class="text">客户总数:</p><span style=" font-size: 30px;color:  rgba(231, 204, 48, 0.979);">{{users}}</span></span>
          <span><i class="el-icon-user" style="color:rgba(231, 204, 48, 0.979)"></i></span>
        </div>
        </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="main" :style="{ width: '100%', height: '500px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div>
            <h3>系统公告</h3>
          </div>
          <el-collapse accordion v-model="active">
            <el-collapse-item
              :name="index"
              v-for="(item, index) in notices"
              :key="item.id"
            >
              <template slot="title">
                <b>{{ item.title }}</b>
                <span style="margin-left: 50px; color: #888">{{
                  item.time
                }}</span>
              </template>
              <div style="padding: 0 20px">{{ item.content }}</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-card style="margin-top: 20px">
        <div id="histogram" :style="{ width: '100%', height: '500px' }"></div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import API from "../../utils/request";

const url = "/api/user/";

export default {
  name: "Home",
  data() {
    return {
      notices: [],
      active: 0,
      user: {},
      books:[],
      //访问量
      VisitsCount:0,
      //销售量
      sales:0,
      //销售额
      turnover:0,
      //所有用户量
      users:0,
    };
  },
  mounted() {
    this.user = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : {};
    this.load();
    this.book();
    this.getBooks()
  },
  methods: {
    getBooks() {
       API.get("/api/msslyyBook").then(res => {
          this.books=res.data
          this.histogram1();
       })
    },
    load() {
      API.get("/api/notice/").then((res) => {
        this.notices = res.data;
      });
      API.get("/api/statistics").then((res) => {
        this.VisitsCount = res.data;
      });
       API.get("/api/statistics/sales").then((res) => {
        this.sales = res.data;
      });
       API.get("/api/statistics/turnover").then((res) => {
        this.turnover = res.data;
      });
      API.get("/api/msslyyUser/total").then((res) => {
        this.users = res.data;
      });
    },
    //旭日图
    book() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;

      var colors = ["#368E55", "#1C2F81", "#287BB0", "#0A6992", "#4C951B"];
      var bgColor = "#fff";

      var itemStyle = {
        star5: {
          color: colors[0],
        },
        star4: {
          color: colors[1],
        },
        star3: {
          color: colors[2],
        },
        star2: {
          color: colors[3],
        },
      };

      var data = [
        {
          name: "虚构",
          itemStyle: {
            color: colors[1],
          },
          children: [
            {
              name: "小说",
              children: [
                {
                  name: "5☆",
                  children: [
                    {
                      name: "疼",
                    },
                    {
                      name: "慈悲",
                    },
                    {
                      name: "楼下的房客",
                    },
                  ],
                },
                {
                  name: "4☆",
                  children: [
                    {
                      name: "虚无的十字架",
                    },
                    {
                      name: "无声告白",
                    },
                    {
                      name: "童年的终结",
                    },
                  ],
                },
                {
                  name: "3☆",
                  children: [
                    {
                      name: "疯癫老人日记",
                    },
                  ],
                },
              ],
            },
            {
              name: "其他",
              children: [
                {
                  name: "5☆",
                  children: [
                    {
                      name: "纳博科夫短篇小说全集",
                    },
                  ],
                },
                {
                  name: "4☆",
                  children: [
                    {
                      name: "安魂曲",
                    },
                    {
                      name: "人生拼图版",
                    },
                  ],
                },
                {
                  name: "3☆",
                  children: [
                    {
                      name: "比起爱你，我更需要你",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          name: "非虚构",
          itemStyle: {
            color: colors[2],
          },
          children: [
            {
              name: "设计",
              children: [
                {
                  name: "5☆",
                  children: [
                    {
                      name: "无界面交互",
                    },
                  ],
                },
                {
                  name: "4☆",
                  children: [
                    {
                      name: "数字绘图的光照与渲染技术",
                    },
                    {
                      name: "日本建筑解剖书",
                    },
                  ],
                },
                {
                  name: "3☆",
                  children: [
                    {
                      name: "奇幻世界艺术\n&RPG地图绘制讲座",
                    },
                  ],
                },
              ],
            },
            {
              name: "社科",
              children: [
                {
                  name: "5☆",
                  children: [
                    {
                      name: "痛点",
                    },
                  ],
                },
                {
                  name: "4☆",
                  children: [
                    {
                      name: "卓有成效的管理者",
                    },
                    {
                      name: "进化",
                    },
                    {
                      name: "后物欲时代的来临",
                    },
                  ],
                },
                {
                  name: "3☆",
                  children: [
                    {
                      name: "疯癫与文明",
                    },
                  ],
                },
              ],
            },
            {
              name: "心理",
              children: [
                {
                  name: "5☆",
                  children: [
                    {
                      name: "我们时代的神经症人格",
                    },
                  ],
                },
                {
                  name: "4☆",
                  children: [
                    {
                      name: "皮格马利翁效应",
                    },
                    {
                      name: "受伤的人",
                    },
                  ],
                },
                {
                  name: "3☆",
                },
                {
                  name: "2☆",
                  children: [
                    {
                      name: "迷恋",
                    },
                  ],
                },
              ],
            },
            {
              name: "居家",
              children: [
                {
                  name: "4☆",
                  children: [
                    {
                      name: "把房子住成家",
                    },
                    {
                      name: "只过必要生活",
                    },
                    {
                      name: "北欧简约风格",
                    },
                  ],
                },
              ],
            },
            {
              name: "绘本",
              children: [
                {
                  name: "5☆",
                  children: [
                    {
                      name: "设计诗",
                    },
                  ],
                },
                {
                  name: "4☆",
                  children: [
                    {
                      name: "假如生活糊弄了你",
                    },
                    {
                      name: "博物学家的神秘动物图鉴",
                    },
                  ],
                },
                {
                  name: "3☆",
                  children: [
                    {
                      name: "方向",
                    },
                  ],
                },
              ],
            },
            {
              name: "哲学",
              children: [
                {
                  name: "4☆",
                  children: [
                    {
                      name: "人生的智慧",
                    },
                  ],
                },
              ],
            },
            {
              name: "技术",
              children: [
                {
                  name: "5☆",
                  children: [
                    {
                      name: "代码整洁之道",
                    },
                  ],
                },
                {
                  name: "4☆",
                  children: [
                    {
                      name: "Three.js 开发指南",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ];

      for (var j = 0; j < data.length; ++j) {
        var level1 = data[j].children;
        for (var i = 0; i < level1.length; ++i) {
          var block = level1[i].children;
          var bookScore = [];
          var bookScoreId;
          for (var star = 0; star < block.length; ++star) {
            var style = (function (name) {
              switch (name) {
                case "5☆":
                  bookScoreId = 0;
                  return itemStyle.star5;
                case "4☆":
                  bookScoreId = 1;
                  return itemStyle.star4;
                case "3☆":
                  bookScoreId = 2;
                  return itemStyle.star3;
                case "2☆":
                  bookScoreId = 3;
                  return itemStyle.star2;
              }
            })(block[star].name);

            block[star].label = {
              color: style.color,
              downplay: {
                opacity: 0.5,
              },
            };

            if (block[star].children) {
              style = {
                opacity: 1,
                color: style.color,
              };
              block[star].children.forEach(function (book) {
                book.value = 1;
                book.itemStyle = style;

                book.label = {
                  color: style.color,
                };

                var value = 1;
                if (bookScoreId === 0 || bookScoreId === 3) {
                  value = 5;
                }

                if (bookScore[bookScoreId]) {
                  bookScore[bookScoreId].value += value;
                } else {
                  bookScore[bookScoreId] = {
                    color: colors[bookScoreId],
                    value: value,
                  };
                }
              });
            }
          }

          level1[i].itemStyle = {
            color: data[j].itemStyle.color,
          };
        }
      }

      option = {
        backgroundColor: bgColor,
        color: colors,
        series: [
          {
            type: "sunburst",
            center: ["50%", "48%"],
            data: data,
            sort: function (a, b) {
              if (a.depth === 1) {
                return b.getValue() - a.getValue();
              } else {
                return a.dataIndex - b.dataIndex;
              }
            },
            label: {
              rotate: "radial",
              color: bgColor,
            },
            itemStyle: {
              borderColor: bgColor,
              borderWidth: 2,
            },
            levels: [
              {},
              {
                r0: 0,
                r: 40,
                label: {
                  rotate: 0,
                },
              },
              {
                r0: 40,
                r: 105,
              },
              {
                r0: 115,
                r: 140,
                itemStyle: {
                  shadowBlur: 2,
                  shadowColor: colors[2],
                  color: "transparent",
                },
                label: {
                  rotate: "tangential",
                  fontSize: 10,
                  color: colors[0],
                },
              },
              {
                r0: 140,
                r: 145,
                itemStyle: {
                  shadowBlur: 80,
                  shadowColor: colors[0],
                },
                label: {
                  position: "outside",
                  textShadowBlur: 5,
                  textShadowColor: "#333",
                },
                downplay: {
                  label: {
                    opacity: 0.5,
                  },
                },
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //柱状图
    histogram1() {
      var chartDom = document.getElementById("histogram");
      var myChart = this.$echarts.init(chartDom);
      var option;

      var dataAxis = [];
      var data = [];
      var yMax = 500;
      var dataShadow = [];

      this.books.forEach(e=>{
        dataAxis.push(e.bookTitle)
        data.push(e.bookQuantityInput-e.bookQuantityOutput)
      })



      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      option = {
        title: {
          text: "图书数量统计",
          subtext: "Feature Sample: Gradient Color, Shadow, Click Zoom",
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            textStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#999",
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#1DC9BE" },
                { offset: 0.5, color: "#1D95C9" },
                { offset: 1, color: "#1D59C9" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            data: data,
          },
        ],
      };

      // Enable data zoom when user click bar.
      var zoomSize = 6;
      myChart.on("click", function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[
              Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
            ],
        });
      });

      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.a{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 20px;
}
.b{
  flex: 1;
  
}
.c{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 
}
.c i{
   margin-right: 30px;
   font-size: 100px;
}
.text{
  color: gray;
}

.el-card{
  border-radius: 40px;
}
</style>
